<template>
  <view class="tab1 box">
    <img src="../../static/img/bg.png" alt="" srcset="" width="100%" />
    <view class="tab1text">

     <!-- <transition-group name="slide" mode="out-in"> -->
      <view v-for="(item, index) in swiperData" :key="index" class="slide-item ">
        <transition name="slide">
          <view :style="{ height: '166px' }" v-if="item.show" class="slide-content">
          <view class="multiple-tag">{{ item.multiple }}
          </view>
          <span class="money-unit">￥</span>
          <b class="money-num">{{ item.money }}</b>
        </view>
        </transition>
      
      </view>
    <!-- </transition-group> -->
    </view>

    <view class="tab1btn">
      <view class="copy-btn-warp">
        <button class="copy-btn animate__pulse" @click="copyText">
          点击复制口令
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { getEle } from "@/api/userchannel.js";
import {isIos,toElmApp} from '../../utils/eleutil.js'

export default {
  data() {
    return {
      swiperData: [
        { money: 15, multiple: "已翻2.7倍", show: true },
        { money: 19, multiple: "已翻3.0倍", show: false },
        { money: 13, multiple: "已翻2.6倍", show: false },
        { money: 10, multiple: "已翻1.5倍", show: false },
        { money: 12, multiple: "已翻2.7倍", show: false },
        { money: 20, multiple: "已翻2.1倍", show: false },
        { money: 18, multiple: "已翻3倍", show: false },
      ],
      currentIndex: 0,
      slideTranslate: 100,
      clipboardText:
        "0复zんι口~令 666:/＄dyQhfjX＄~.饿了么App【快來領外賣紅包，最高20元，人人都有哦~】",
      eleData: {},
    };
  },
  mounted() {
    const url = new URL(window.location.href);
    const params = new URLSearchParams(url.search);
    const sid = params.get("sid");
    if(sid){
      this.getEleData(sid);
    }
    this.startInterval();
  },
  methods: {
    startInterval() {
      setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.swiperData.length;
        this.updateShowStatus();
      }, 5000);
    },
    updateShowStatus() {
      this.swiperData.forEach((item, index) => {
        item.show = index === this.currentIndex;
      });
    },
    getEleData(sid) {
      getEle(sid).then((res) => {
        console.info(res);
        this.eleData = res.data.alibaba_alsc_union_eleme_promotion_officialactivity_get_response;
        this.clipboardText = this.eleData.data.link.eleme_word;
      });
    },
    copyText() {
      let me = this;
      uni.setClipboardData({
        data: this.clipboardText,
        success: function () {
          me.showCopiedMessage();
        },
      });

      // 跳转到饿了么app
      if (isIos()) {
        setTimeout(() => {
          toElmApp(this.eleData.data.link.h5_url);
        }, 500)
      }
    },
    showCopiedMessage() {
      wx.showModal({
        title: "提示",
        content: "口令复制成功，请打开[饿了么APP]领取",
        showCancel: false,
        confirmText: "确定",
        success: function (res) {
			console.info(res)
          if (res.confirm) {
            // 用户点击了确定按钮
            // 在这里可以执行其他操作
            // 跳转到饿了么app
            if (isIos()) {
              setTimeout(() => {
                toElmApp(this.eleData.data.link.h5_url);
              }, 500)
            }
          }
        },
      });
    },
  },
};
</script>
<style>
.swiper-container {
  height: 200px; /* 设置容器的高度，根据实际需求进行调整 */
  overflow: hidden; /* 隐藏超出容器高度的内容 */
}

.slide-container {
  position: relative;
  height: 100%;
}

.slide-item {
  display: flex;
  justify-content: center;
  position: absolute; /* 绝对定位 */
  bottom: 0; /* 从底部开始排列 */
  width: 100%;
  height: 100%;
}
.slide-content {
  transition: transform 0.5s; /* 添加过渡效果 */
  transform: translateY(100%); /* 初始位置，向下偏移 100% */
}

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s; /* 添加过渡效果 */
}

.slide-enter {
  transform: translateY(-100%); /* 进入动画，向上偏移 100% */
}

.slide-leave-to {
  transform: translateY(100%); /* 离开动画，向下偏移 100% */
}
.box {
  width: 96vw;
  margin: 0 2vw;
}
.tab1 {
  position: relative;
  width: 100%;
}
.tab1 img {
  border-radius: 10px;
}
.tab1text {
  position: absolute;
  top: 9px;
  color: #f53c28;
  width: 100%;
}


.tab1btn {
  position: absolute;
  top: 520px;
  color: #f53c28;
  width: 100%;
}
.animate__pulse {
  animation-name: pulse;
  animation-timing-function: ease-in-out;
}

@keyframes pulse {
  0% {
    transform: scaleX(1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scaleX(1);
  }
}
.copy-btn {
  display: block;
  width: 310px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  background: linear-gradient(180deg, #fe7429 0%, #ff370e 100%);
  border-radius: 40px;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  animation-duration: 0.8s;
  animation-iteration-count: infinite;
  box-shadow: none;
  outline: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  border: 1px solid #ff591d;
}
.multiple-tag {
  position: absolute;
  right: -84px;
  top: 0;
  width: 22.66667vw;
  background: url("../../static/img/multiple_tag.png") no-repeat top;
  background-size: cover;
  background-color: transparent;
  font-size: 3.2vw;
  text-align: center;
  transform: scale(0.8);
  transform-origin: 0 50%;
  line-height: 8.53333vw;
}
.money-unit {
  font-size: 9.33333vw;
}
.money-num {
  font-size: 15.73333vw;
  font-weight: bolder;
}
</style>
